<template>
	<div class="addmov">
		<div style="width: 56%;">
			<div>
				<el-upload :multipe="false" :auto-upload="false" :file-list="fileList" :on-change="handleChange"
					list-type="picture"  action = "uploadAction" accept="image/jpg,image/jpeg">
					<h3>点击添加图片</h3>
				</el-upload>
			</div>
			<el-form ref="form" :model="form" label-width="80px" size="mini">
				<el-form-item label="书籍名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="书籍序号" prop="sn">
					<el-input v-model="form.sn"></el-input>
				</el-form-item>
				<el-form-item label="书籍价格" prop="price">
					<el-input v-model="form.price"></el-input>
				</el-form-item>
				<el-form-item label="书籍厂商" prop="maker">
					<el-input v-model="form.maker"></el-input>
				</el-form-item>
				<el-form-item label="书籍作者" prop="author">
					<el-input v-model="form.author"></el-input>
				</el-form-item>
				<el-form-item label="出厂时间">
					<el-date-picker placeholder="选择时间" v-model="form.tmake" type="datetime" value-format="timestamp"
						format="yyyy年MM月dd日">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="书籍库存" prop="stock">
					<el-input v-model="form.stock"></el-input>
				</el-form-item>
				<el-form-item label="商品类型">
					<el-cascader size="medium" style="width: 300px;" v-model="form.selectedTypes" :options="allTypes"
						@change="handleTypes"></el-cascader>
				</el-form-item>
				<el-form-item label="书籍详情" prop="memo">
					<el-input type="textarea" :rows="5" placeholder="请输入书籍详情" v-model="form.info">
					</el-input>
				</el-form-item>
			</el-form>
			<el-button type="primary" @click="add('arr')">立即添加</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'AddMovList',
		data() {
			return {
				form: {
					selectedTypes: [],
					id: 0,
					pic: ''
				},
				type: [],
				fileList: [],
				allTypes: [],

			}
		},
		methods: {
			handleChange(file, fileList) {
				this.fileList = fileList; //获取文件内容
			},
			handleTypes(v) {
				console.log(v)
				console.log(this.form.selectedTypes)
			},
			add() {
				let formData = new FormData();
				if (this.fileList.length > 0 && this.fileList[0].raw != null) {
					formData.append("mypic", this.fileList[0].raw);
				}
				console.log(this.form.tmake);
				formData.append("id", this.form.id);
				formData.append("name", this.form.name);
				formData.append("sn", this.form.sn);
				formData.append("author", this.form.author);
				formData.append("maker", this.form.maker)
				formData.append("tmake", this.form.tmake) //时间戳, 整数
				let n = this.form.selectedTypes.length - 1;
				let typeid = 0;
				if (n >= 0) typeid = this.form.selectedTypes[n];
				formData.append("type.id", typeid)
				formData.append("pic", this.form.pic)
				formData.append("price", this.form.price)
				formData.append("info", this.form.info)
				formData.append("stock", this.form.stock)
				var that = this;
				this.$postf("/api/adm/book/add", formData).then(resp => {
					this.$message.error(resp.data.msg);
					console.log(resp.data.data);
					if (resp.data.code == 200) {
						this.form = resp.data.data.book;
						console.log(this.form);
					}
				})
			},
			change2Tree(respData) {
				let a = respData;
				this.allTypes = [];
				for (let i = 0; i < a.length; i++) {
					if (a[i].pid == 0) {
						//console.log(a[i])
						//console.log(a[i].id)
						let obj = {
							'value': a[i].id,
							'label': a[i].name
						}
						let childs = [];
						for (let j = 0; j < a.length; j++) {
							//console.log(a[i].id)
							if (a[j].pid == a[i].id) {
								childs.push({
									'value': a[j].id,
									'label': a[j].name
								})
							}
						}
						if (childs.length > 0) {
							obj.children = childs;
						}
						this.allTypes.push(obj);
						console.log("将后台传递过了的2层类型， 转为树的结构")
						console.log(this.allTypes);
					}
				}
			},
		},
		mounted() {
			let id = this.$route.query.bookid;
			console.log("Vue 组件生命周期去获取路由传递过来的参数=" + id)
			this.$get("/api/public/type/findAll2").then(resp => {
				console.log("2层商品类型下拉框 el-cascader, 需要将/api/public/type/findAll2 数据转为 el-cascader 格式数据")
				this.originTypes = resp.data.data;
				this.change2Tree(resp.data.data);
				if (id == undefined || id == "0") { //添加
					this.form = {
						type: {
							id: 0
						},
						id: 0,
						name: "",
						price: 0.0,
						pic: ''
					};
					this.title = ".添加";
				} else { //更新
					this.$get("/api/adm/book/findById/" + id).then(resp => {
						this.form = resp.data.data;
						//绑定类型到数组
						this.form.selectedTypes = this.getNewTypes(this.form);
						this.title = ".修改";
					})
				}
			})
		}
	}
</script>

<style scoped>
	.addmov {
		width: 85%;
	}
</style>
